<template>
  <header>
    <!-- 顶部欢迎条 -->
    <div class="top_welcome d-none d-md-block">
      <div class="container">
        <span class="welcome_text">欢迎来到流浪动物之家！</span>
      </div>
    </div>

    <!-- 固定导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-light fixed-top main-navbar">
      <div class="container">
        <!-- Logo -->
        <router-link class="navbar-brand" to="/">
          <img :src="require('@/assets/images/20220716/1657960558678039.png')" class="logo" alt="流浪动物之家" @error="handleLogoError">
        </router-link>

        <!-- 移动端菜单切换按钮 -->
        <button 
          class="navbar-toggler" 
          type="button" 
          data-bs-toggle="collapse" 
          data-bs-target="#navbarNav"
          aria-controls="navbarNav" 
          aria-expanded="false" 
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <!-- 导航菜单 -->
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav ms-auto">
            <li class="nav-item">
              <router-link class="nav-link" to="/">首 页</router-link>
            </li>
            
            <li class="nav-item dropdown" :class="{ active: isRescueActive }">
              <a 
                class="nav-link dropdown-toggle" 
                :class="{ active: isRescueActive }"
                href="#" 
                id="rescueCasesDropdown" 
                role="button" 
                data-bs-toggle="dropdown" 
                aria-expanded="false"
              >
                救助案例
              </a>
              <ul class="dropdown-menu animated-dropdown" aria-labelledby="rescueCasesDropdown">
                <li><router-link class="dropdown-item" to="/rescue-cases/dogs">
                  <i class="dropdown-icon">🐕</i>犬类救助
                </router-link></li>
                <li><router-link class="dropdown-item" to="/rescue-cases/cats">
                  <i class="dropdown-icon">🐱</i>猫类救助
                </router-link></li>
                <li><router-link class="dropdown-item" to="/rescue-cases/others">
                  <i class="dropdown-icon">🐰</i>其他动物
                </router-link></li>
              </ul>
            </li>
            
            <li class="nav-item">
              <router-link class="nav-link" to="/adoption-cases">领养案例</router-link>
            </li>
            
            <li class="nav-item dropdown">
              <a 
                class="nav-link dropdown-toggle" 
                href="#" 
                id="petColumnDropdown" 
                role="button" 
                data-bs-toggle="dropdown" 
                aria-expanded="false"
              >
                宠物栏目
              </a>
              <ul class="dropdown-menu animated-dropdown" aria-labelledby="petColumnDropdown">
                <li><router-link class="dropdown-item" to="/pet-column/knowledge">
                  <i class="dropdown-icon">📚</i>养宠知识
                </router-link></li>
                <li><router-link class="dropdown-item" to="/pet-column/news">
                  <i class="dropdown-icon">📰</i>宠物新闻
                </router-link></li>
              </ul>
            </li>
            
            <li class="nav-item dropdown">
              <a 
                class="nav-link dropdown-toggle" 
                href="#" 
                id="aboutDropdown" 
                role="button" 
                data-bs-toggle="dropdown" 
                aria-expanded="false"
              >
                关于我们
              </a>
              <ul class="dropdown-menu animated-dropdown" aria-labelledby="aboutDropdown">
                <li><router-link class="dropdown-item" to="/about/intro">
                  <i class="dropdown-icon">🏠</i>站点简介
                </router-link></li>
                <li><router-link class="dropdown-item" to="/about/purpose">
                  <i class="dropdown-icon">🎯</i>成立目的
                </router-link></li>
              </ul>
            </li>
            
            <li class="nav-item">
              <router-link class="nav-link" to="/guestbook">在线留言</router-link>
            </li>
            
            <li class="nav-item">
              <router-link class="nav-link" to="/contact">联系我们</router-link>
            </li>
            
            <!-- 用户登录状态 -->
            <li class="nav-item dropdown" v-if="!isLoggedIn">
              <router-link class="nav-link" to="/auth">
                <i class="bi bi-person-circle"></i> 登录/注册
              </router-link>
            </li>
            
            <!-- 用户信息下拉菜单 -->
            <li class="nav-item dropdown" v-else>
              <a 
                class="nav-link dropdown-toggle user-menu" 
                href="#" 
                id="userDropdown" 
                role="button" 
                data-bs-toggle="dropdown" 
                aria-expanded="false"
              >
                <i class="bi bi-person-circle"></i>
                <span class="user-name">{{ currentUser.nickname || currentUser.username }}</span>
              </a>
              <ul class="dropdown-menu animated-dropdown user-dropdown" aria-labelledby="userDropdown">
                <li>
                  <div class="dropdown-item-text user-info">
                    <div class="user-avatar">
                      <i class="bi bi-person-circle"></i>
                    </div>
                    <div class="user-details">
                      <div class="user-nickname">{{ currentUser.nickname || currentUser.username }}</div>
                      <div class="user-email">{{ currentUser.email || '未设置邮箱' }}</div>
                    </div>
                  </div>
                </li>
                <li><hr class="dropdown-divider"></li>
                <li>
                  <a class="dropdown-item" href="#" @click.prevent="logout">
                    <i class="dropdown-icon bi bi-box-arrow-right"></i>退出登录
                  </a>
                </li>
              </ul>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <!-- 移动端底部导航 -->
    <nav class="navbar fixed-bottom bg-white d-md-none mobile-bottom-nav">
      <div class="container-fluid">
        <div class="row w-100">
          <div class="col-3 text-center">
            <router-link to="/" class="mobile-nav-link">
              <i class="bi bi-house"></i>
              <span>首页</span>
            </router-link>
          </div>
          <div class="col-3 text-center">
            <a href="tel:" class="mobile-nav-link">
              <i class="bi bi-telephone"></i>
              <span>手机</span>
            </a>
          </div>
          <div class="col-3 text-center">
            <a 
              href="#" 
              class="mobile-nav-link" 
              data-bs-toggle="collapse" 
              data-bs-target="#navbarNav"
            >
              <i class="bi bi-list"></i>
              <span>分类</span>
            </a>
          </div>
          <div class="col-3 text-center">
            <a href="#" class="mobile-nav-link" @click="scrollToTop">
              <i class="bi bi-arrow-up-circle"></i>
              <span>顶部</span>
            </a>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

<script>
import authService from '@/services/auth'

export default {
  name: 'AppHeader',
  data() {
    return {
      currentUser: null
    }
  },
  computed: {
    isRescueActive() {
      return this.$route.path.startsWith('/rescue-cases')
    },
    isLoggedIn() {
      return authService.isLoggedIn()
    }
  },
  methods: {
    handleLogoError(event) {
      // 如果Logo图片加载失败，显示文字Logo
      event.target.style.display = 'none'
      event.target.parentNode.innerHTML = '<span class="text-logo">流浪动物之家</span>'
    },
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    },
    logout() {
      const result = authService.logout()
      if (result.success) {
        this.currentUser = null
        this.$router.push('/')
        // 可以添加退出成功的提示
        console.log('退出登录成功')
      }
    },
    updateUserInfo() {
      this.currentUser = authService.getCurrentUser()
    }
  },
  mounted() {
    // 初始化用户信息
    this.updateUserInfo()
    
    // 监听路由变化，更新用户状态
    this.$watch('$route', () => {
      this.updateUserInfo()
    })
  }
}
</script>

<style scoped>
.top_menu {
  background: #f8f9fa;
  padding: 10px 0;
  font-size: 14px;
}

.top_name {
  color: #666;
}

.language {
  float: right;
  color: #666;
}

.language a {
  color: #04A07B;
  text-decoration: none;
  margin-left: 5px;
}

.language a:hover {
  text-decoration: underline;
}

.main-navbar {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(10px);
  border-radius: 0;
}

.logo {
  max-height: 50px;
  max-width: 200px;
  margin-top: 5px;
}

.text-logo {
  font-size: 20px;
  font-weight: bold;
  color: #04A07B;
}

.navbar-nav .nav-link {
  padding: 15px 20px;
  color: #333 !important;
  font-size: 16px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.router-link-active {
  color: #04A07B !important;
  transform: translateY(-1px);
}

.dropdown-menu {
  border: none;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  border-radius: 8px;
  margin-top: 5px;
}

.dropdown-item {
  padding: 10px 20px;
  color: #333;
  transition: all 0.3s ease;
}

.dropdown-item:hover {
  background-color: #04A07B;
  color: white;
}

.mobile-bottom-nav {
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  padding: 10px 0;
}

.mobile-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #666;
  font-size: 12px;
  transition: color 0.3s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link.router-link-active {
  color: #04A07B;
}

.mobile-nav-link i {
  font-size: 20px;
  margin-bottom: 4px;
}

/* 为主内容添加顶部边距，避免被固定导航栏遮挡 */
:global(body) {
  padding-top: 80px;
  padding-bottom: 80px;
}

@media (max-width: 768px) {
  :global(body) {
    padding-top: 70px;
    padding-bottom: 80px;
  }
  
  .main-navbar {
    padding: 5px 0;
  }
  
  .logo {
    max-height: 40px;
  }
  
  .navbar-nav .nav-link {
    padding: 10px 15px;
    font-size: 14px;
  }
}

@media (min-width: 992px) {
  .main-navbar {
    padding: 0;
    margin: 42px auto 0;
    width: 1200px;
    border-radius: 5px;
  }
  
  .navbar-nav .nav-link {
    padding: 25px 22px;
  }
}
/* 下拉菜单优化 */
.dropdown-menu.animated-dropdown {
  border: none;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  padding: 8px 0;
  margin-top: 5px;
  background: white;
  backdrop-filter: blur(10px);
  animation: dropdownFadeIn 0.3s ease-out;
  transform-origin: top center;
  min-width: 180px;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.dropdown-item {
  padding: 12px 20px;
  color: #333;
  font-weight: 500;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  border-radius: 8px;
  margin: 2px 8px;
}

.dropdown-item:hover {
  background: #f8f9fa;
  color: #04A07B;
  transform: translateX(5px);
}

.dropdown-icon {
  margin-right: 8px;
  font-size: 16px;
}

/* 移动端导航优化 */
@media (max-width: 768px) {
  .navbar-collapse {
    background: rgba(255,255,255,0.98);
    border-radius: 8px;
    margin-top: 8px;
    padding: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    backdrop-filter: blur(15px);
  }
  
  .navbar-nav .nav-link {
    padding: 12px 0 !important;
    border-bottom: 1px solid rgba(0,0,0,0.05);
    font-size: 16px;
  }
  
  .navbar-nav .nav-link:last-child {
    border-bottom: none;
  }
  
  .navbar-nav .nav-link::after {
    display: none; /* 移动端隐藏下划线效果 */
  }
  
  .dropdown-menu.animated-dropdown {
    background: #f8f9fa;
    border-radius: 8px;
    margin: 8px 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border: 1px solid #e9ecef;
  }
  
  .dropdown-item {
    padding: 12px 15px;
    margin: 2px 5px;
    font-size: 15px;
  }
}

/* 用户菜单样式 */
.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
}

.user-menu i {
  font-size: 18px;
}

.user-name {
  font-weight: 500;
}

.user-dropdown {
  min-width: 250px;
  right: 0;
  left: auto;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background: #f8f9fa;
  border-radius: 8px;
  margin: 5px;
}

.user-avatar {
  margin-right: 12px;
}

.user-avatar i {
  font-size: 32px;
  color: #04A07B;
}

.user-details {
  flex: 1;
}

.user-nickname {
  font-weight: 600;
  color: #333;
  font-size: 14px;
  margin-bottom: 2px;
}

.user-email {
  color: #666;
  font-size: 12px;
}

.dropdown-divider {
  margin: 8px 0;
}

@media (max-width: 768px) {
  .user-dropdown {
    min-width: 220px;
  }
  
  .user-info {
    padding: 12px 15px;
  }
  
  .user-avatar i {
    font-size: 28px;
  }
  
  .user-nickname {
    font-size: 13px;
  }
  
  .user-email {
    font-size: 11px;
  }
}
</style>
